<!--
 - 顶部组件
 - showBack   用来控制是否显示返回按钮
 - title	  页面标题
 - menu		  右侧菜单
-->
<template>
	<view class="top_container" :style="{paddingTop:system.safeArea.top+20+'px'}">
		<view class="left">
			<template v-if="showBack">
				<uni-icons type="left" @click="back"></uni-icons>
			</template>
		</view>
		<view class="center">
			{{title}}
		</view>
		<view class="right">
			<template v-if="showMenus">
				<uni-icons size="20" type="plusempty" @tap="handleClick"></uni-icons>
				<view class="list" :style="{top:system.safeArea.top+48+'px'}" v-show="showMenu">
					<template v-for="item in menu">
						<view 
						 @tap.stop="handleItemClick(item.code)">
							{{item.name}}
						</view>
					</template>
				</view>
			</template>
			
		</view>
	</view>
</template>

<script>
	const app = getApp({allowDefault: true});
	export default {
		name: "topMenu",
		props: {
			title: {
				type: String,
				default: ''
			},
			showBack: {
				type: Boolean,
				default: true
			},
			menu: {
				type: Array,
				default: []
			},
		},
		computed:{
			showMenus(){
				return this.menu.length>0
			}
		},
		data() {
			return {
				showMenu:false,
				system:null
			};
		},
		created(){
			this.system = uni.getWindowInfo()
		},
		methods:{
			handleClick(event){
				console.log('点击了')
				if (event && event.stopPropagation) {  // 检查 event 是否定义
				    event.stopPropagation();  // 安全调用
				}
				this.showMenu = !this.showMenu
				return false
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			handleItemClick(code){
				let url = ""
				this.showMenu=false
				this.$emit('switchMenu',code)
				// switch(code){
				// 	case 1:
				// 	url = "/pages/index/add"
				// 	break;
				// }
				// uni.navigateTo({
				// 	url
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top_container {
		width: 100%;
		// height: 150rpx;
		// padding-top: 20px;
		// position: absolute;
		// top: 0;
		position: sticky;
		top: 0;
		left: 0;
		background-color: #f0f0f0;
		z-index: 998;
		padding: 20px 20px 20rpx 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		.left{

			border-radius: 50%;
			
			display: flex;
			align-items: center;
			justify-content: center;
			box-shadow: #32efce;
			.uni-icons{
				border: 1rpx solid #32efce;
				padding: 8rpx;
				border-radius: 50%;
			}
		}
		.center{
			font-size: 36rpx;
		}
		.right {
			// width: 100rpx;
			// float: right;
			text-align: center;
			.icon {
				width: 50rpx;
				height: 50rpx;
				
			}
			
			.list{
				min-height: 100rpx;
				background-color: #fff;
				font-size: 28rpx;
				background-color: #f0f0f0;
				color: #000;
				position: absolute;
				top: 92rpx;
				right: 0;
				// right: 30rpx;
				padding: 30rpx 20rpx;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				z-index: 9999;
			}
		}
	}
</style>